

<script setup>

import { ref } from 'vue'
import { loginUser } from '../../api/user'
import { ElMessage } from 'element-plus'
import router from '@/router'

const loginForm = ref({
    username: '',
    password:''
})
const loginFormRef = ref(null)

//校验规则
const loginRules = ref({
    username:[
    { required: true, message: '账号不能为空！', trigger: 'blur' },
    { min: 3, max: 20, message: '账号长度在3-20位之间！', trigger: 'blur' },
    ],
    password:[
    { required: true, message: '密码不能为空！', trigger: 'blur' },
    { min: 3, max: 60, message: '账号长度在3-60位之间！', trigger: 'blur' },
    ],
})

const submitForm =async ()=>{
    if(!loginFormRef) return
    await loginFormRef.value.validate(async(valid, fields) => {
        if(valid){
            let result =await loginUser(loginForm.value)
            if(result.code==200){
                //存入
                localStorage.setItem('userInfo',JSON.stringify(result.data))
                ElMessage.success('登录成功！')
                router.push('/')
            }else{
                ElMessage.error('登录失败！')
            }
        }else{
             console.log('校验失败！!', fields)
        }
    })

}


</script>


<template>
  
<el-form
    ref="loginFormRef"
    style="max-width: 600px"
    :model="loginForm"
    :rules="loginRules"
    label-width="auto"
  >
    <el-form-item label="账号" prop="username">
      <el-input v-model="loginForm.username"  placeholder="请输入用户名"/>
    </el-form-item>
    <el-form-item label="密码" prop="password">
      <el-input type="password" v-model="loginForm.password"  placeholder="请输入密码"/>
    </el-form-item>
      <el-form-item>
        <el-button type="primary" @click="submitForm()">
          登录
        </el-button>
      </el-form-item>
</el-form>

</template>



<style>

</style>